<template></template>
<script setup lang="ts">
import * as L from 'leaflet'
import yulinSideGeojson from '@/assets/data/yulin-side.json'
import taiyuanQxGeojson from '@/assets/data/taiyuan-qx.json'
import apiList from '@/pages/integrated-monitoring/api/api'
const baseMap = inject('baseMap')
let clickLatlng = inject('clickLatlng')
let rightPosition = inject('rightPosition')
import positionImg from '../images/position.png'
let countyName = ref()
useEventBus('update:rightWgyb').on(() => {
  if (rightPosition) toRaw(baseMap.value).removeLayer(rightPosition)
})
const handleMapClick = async ev => {
  if (isPointWithinYulinRegion(ev.latlng)) {
    clickLatlng.value.lat = ev.latlng.lat
    clickLatlng.value.lng = ev.latlng.lng
    var myIcon = L.icon({
      iconUrl: positionImg,
      iconSize: [24, 24],
      iconAnchor: [12, 12]
    })
    if (rightPosition) toRaw(baseMap.value).removeLayer(rightPosition)
    rightPosition = L.marker(ev.latlng, { icon: myIcon }).addTo(
      toRaw(baseMap.value)
    )
    let pos = await apiList.getAreaByCoordinate({
      longitude: ev.latlng.lng,
      latitude: ev.latlng.lat
    })

    useEventBus('handleStationDialogVisible').emit(true, {
      lon: ev.latlng.lng,
      lat: ev.latlng.lat,
      name: pos.data.extPath
    })
  } else {
    console.log(ev.latlng, '点不在山西区域内')
  }
}

baseMap.value.on('click', handleMapClick)
const yulinRegion = L.geoJSON(yulinSideGeojson)
let isPointWithinYulinRegion = point => {
  let polygonLayer = yulinRegion._layers[Object.keys(yulinRegion._layers)[0]]
  let polygonBounds = polygonLayer.getBounds()
  // 判断点是否在多边形的边界范围内
  if (polygonBounds.contains(point)) {
    return true
  }
  return false
}
onMounted(() => {})

onUnmounted(() => {
  baseMap.value.off('click', handleMapClick)
})
</script>
<style lang="scss" scoped></style>
